<template>
  <div class='btm animate__animated wowlive animate__fadeInUp' >
      <div class="btmx">
        <div class="btmx_left" >
          <div>
            <h4>在线支持</h4>
            <span>
              消费者服务热线<br/>
              xxxxxx<br/>
              7*24小时|普通话<br/>
              xxxxxxxx设计专属热线<br/>
              xxxxxxx<br/>
              在线客服 | xx小时<br/>
            </span>
          </div>
          <!-- <span class="line"></span>
          <span class="line2"></span> -->
          <!-- <div style="border:1px solid black;width:1px;height: 150px; position: absolute; left: 20%;box-shadow: 0 0 2px 1px black;"></div> -->
          <!-- <div style="border:1px solid black;width:1px;height: 150px; position: absolute; left: 50%;box-shadow: 0 0 2px 1px black;"></div> -->
          <div>
            <h4>在线支持</h4>
            <span>
              服务店查询<br/>
              零售店查询
            </span>
          </div>
          <div>
            <h4>关注我们</h4>
            <span class="btmx_img">
              <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2060%2060'%3E%20%3Cdefs%3E%20%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D%3C/style%3E%20%3C/defs%3E%20%3Cg%3E%20%3Cg%3E%20%3Ccircle%20cx='30'%20cy='30'%20r='30'/%3E%20%3Cpath%20class='cls-1'%20d='M26.75,15.12c-7,0-12.75,4.76-12.75,10.63a10.08,10.08,0,0,0,4.87,8.33l-1.68,3.36,4.58-2a15.36,15.36,0,0,0,3.09.77,8.9,8.9,0,0,1-.24-2c0-5.86,5.72-10.63,12.76-10.63a16.81,16.81,0,0,1,1.89.13C38.15,18.84,33,15.12,26.75,15.12Zm-4.25,8a1.59,1.59,0,1,1,1.59-1.59A1.59,1.59,0,0,1,22.5,23.09Zm8.5,0a1.59,1.59,0,1,1,1.59-1.59A1.59,1.59,0,0,1,31,23.09Z'/%3E%20%3Cpath%20class='cls-1'%20d='M48,34.25c0-4.69-4.76-8.5-10.62-8.5s-10.63,3.81-10.63,8.5,4.76,8.5,10.63,8.5a13.21,13.21,0,0,0,2.77-.33l5.73,2.46-2-4A8,8,0,0,0,48,34.25Zm-13.81-.53a1.6,1.6,0,1,1,1.59-1.6A1.6,1.6,0,0,1,34.19,33.72Zm6.37,0a1.6,1.6,0,1,1,1.6-1.6A1.6,1.6,0,0,1,40.56,33.72Z'/%3E%20%3C/g%3E%20%3C/g%3E%20%3C/svg%3E" alt="">
              <img class="btmx2" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2060%2060'%3E%20%3Cdefs%3E%20%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D%3C/style%3E%20%3C/defs%3E%20%3Cg%3E%20%3Cg%3E%20%3Ccircle%20cx='30'%20cy='30'%20r='30'/%3E%20%3Cpath%20class='cls-1'%20d='M46,24c.14,1.75-.16,3.86-1.34,4-1.93.17-.92-1.91-.9-3.17a6.17,6.17,0,0,0-6.17-6.16c-.87,0-2.91.59-2.59-1.23.14-.8.83-.79,1.52-.88A8.13,8.13,0,0,1,46,24Z'/%3E%20%3Cpath%20class='cls-1'%20d='M37.47,28.22c2.23,1.2,4.92,1.8,4.47,5.37-.82,6.57-14.74,11-23.43,6.16-2.39-1.33-4.85-3.27-4.47-7.13.32-3.32,2.6-5.9,4.83-8.09A15.71,15.71,0,0,1,26.29,20c3.31-.82,4.29,1.9,3.4,4.57,1.92-.12,6-2.23,7.78-.17.79.91.49,2.53,0,3.78Zm-2.41,8.45a5.32,5.32,0,0,0,1.43-3.43c0-5.86-10.18-7.17-15.75-4C14.41,32.93,17.09,39.5,24.86,40c4.12.27,8.24-1.16,10.2-3.34Z'/%3E%20%3Cpath%20class='cls-1'%20d='M40.6,26.55c-1.3.09-.81-.88-.89-2a2.4,2.4,0,0,0-1.17-1.76c-1-.47-2.59.34-2.59-1.06,0-1,.92-.93,1.43-1C42.12,20.39,42.42,26.43,40.6,26.55Z'/%3E%20%3Cpath%20class='cls-1'%20d='M31.12,32.8c1.91,5.66-8,8.29-9.84,3.43C20.07,33,23,30.38,26,30.07c2.6-.27,4.53,1,5.1,2.73Zm-4.56,1a.67.67,0,0,0,1.25-.35C27.71,32.78,26.55,32.88,26.56,33.76Zm-1.61,3c1.67-.39,1.89-3.49-.63-2.91C22.21,34.34,22.62,37.3,25,36.76Z'/%3E%20%3C/g%3E%20%3C/g%3E%20%3C/svg%3E" alt="">
            </span>
          </div>
        </div>
        <div class="btmx_right"></div>
      </div>
      <div class="bm">
          <div class="x"></div>
          <div class="bmx">
            <div>版权所有©陌上花开网络科技有限公司。</div>
            <!-- <ul>
              <li>网站地图</li>
              <li>使用条款</li>
              <li>隐私声明</li>
              <li>关于cookies</li>
              <li>法律信息</li>
            </ul> -->
          </div>
      </div>
      <div class="gai"></div>
  </div>
</template>

<script>


export default {
  created () {
    this.$nextTick(() => {
        new this.$wow({ boxClass: "wowlive" }).init();
      });
  }
}
</script>
<style lang='scss' scoped>
// @import url(); 引入公共css类
.btm{
//   background-size: 100% 200%;
//   text-align: center;
}
.btmx{
  width: 100%;
  padding: 100px 40px 10px 40px;
  display: flex;
  justify-content: space-between;
  .btmx_left{
    position:relative;
    // width: 70%;
    width:100%;
    display: flex;
    // text-align: center;
    div{
      width: 33.3%;
      h4{
        font-weight: bold;
      }
      span{
      }
      .btmx_img{
        display: inline-block;
        display: flex;
        margin-top: 25px;
        img{
          width: 24px;
          height: 24px;
        }
        .btmx2{
          margin-left: 30px;
        }
      }
    }
  }
  .btmx_right{
    width: 30%;
    padding: 0 125px;
  }
}
.bm{
  width: 100%;
  padding: 20px 40px 0 40px;
  .bmx{
    display: flex;
    text-align: center;
    justify-content: center;
  }
  ul{
    list-style: none;
    display: flex;
    margin-top: 15px;
    li{
      margin-left: 20px;
    }
  }
  .x{
    height: 2px;
    width: 100%;
    background-color: rgba(0,0,0,.08);
  }
  div{
    margin-top: 10px;
  }
}
.line{
    display: block;
    position: absolute;
    bottom: -5%;
    left: 35%;
    height: 200px;
    width: 2px;
    background-image: radial-gradient(white 5%, white 15%, rgb(119, 119, 119) 60%);
}
.line2{
    display: block;
    position: absolute;
    bottom: -5%;
    left: 65%;
    height: 200px;
    width: 2px;
    background-image: radial-gradient(white 5%, white 15%, grey 60%);
}
</style>
